<template>
  <div class="header">
    <div class="time">
      <span>{{ currentDate }}</span>
      <span>{{ currentTime }}</span>
    </div>
    <div class="title">智慧城市-武汉</div>
  </div>
</template>

<script setup>
import { ref } from "vue"
//获取当前时间
const date = new Date()
const currentDate = ref(date.toLocaleDateString())  // 获取当前日期
const currentTime = ref(date.toLocaleTimeString())  // 获取当前时间
//定义一个函数来更新当前时间
const updateTime = () => {
  const date = new Date()
  currentDate.value = date.toLocaleDateString() // 更新当前日期
  currentTime.value = date.toLocaleTimeString() // 更新当前时间
}
//使用定时器来每秒更新一次当前时间
setInterval(updateTime, 1000)

</script>
<style lang="scss" scoped>
.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  z-index: 10;
  color: #fff;
  font-size: 25px;
  background: url('../assets/images/header.png') no-repeat;
  background-size: cover; 
  .time {
    position: absolute;
    left: 30px;
    top: 30px;
    span {
      margin: 0 20px;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    text-align: center;
  }
}
</style>
